<template>
	<view class="">	
		<z-paging class="z-paging-warp" ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<TbarNav title="万艇" :is_back="false" isbg="0" :stickys="true">
					<template #title>
						<text class="title-txt">万艇</text>
					</template>
				</TbarNav>
			</template>
			<view class="hot-txt">
				<text class="h-right">享好价 超安心</text>
				<text class="h-center">|</text>
				<text class="h-left">省心租 · 无忧退</text>
			</view>
			<view class="list">
				<view class="li" 
					v-for="(item, index) in dataList"
					:key="index"
					 @click="onJmup('/pages/reserve/project/details?id='+item.id)"
					>
					<view class="top-warp">
						<view class="img-warp">
							<image :src="item.image_input" mode="aspectFill"></image>
						</view>
						<itemInfoComp style="height: 100%;" :itemInfo="item"></itemInfoComp>
					</view>
					<view class="bottom-warp">
						<view class="num-time">
							<text style="margin-right: 10rpx;">限乘：{{item.limited||0}}人</text>
							<text>时间：不限</text>
						</view>
						<text class="prize">￥{{item.price}}/时</text>
					</view>
					<!-- <view class="img" @click="onJmup('/pages/reserve/project/details?id='+item.id)" >
						<image :src="item.image_input" mode="aspectFill"></image>
					</view> -->
					<!-- <view class="info">
						<view class="title" @click="onJmup('/pages/reserve/project/details?id='+item.id)" >
							{{item.title}}
						</view>
						<view class="mod">
							<view class="left">
								<view class="span">{{item.ctitle}}</view>
								<view class="tps">限乘：{{item.limited}} 人</view>
							</view>
							
							<view class="right">
								<button @click="onJmup('/pages/reserve/project/order?id='+item.id)" >立即预约</button>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</z-paging>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import { getProjectList } from '@/api/reserve.js';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue'
	import TbarNav from '@/components/TbarNav'
	import itemInfoComp from '@/pages/index/comp/itemInfoComp.vue'
	export default {
		components: {
			tabBar,
			pageFooter,
			TbarNav,
			itemInfoComp
		},
		data() {
			return {
				dataList: [],
				baseUrl: this.$baseUrl,
				type:0
			}
		},
		onLoad(options) {
			this.type = options.type
		},
		onReady() {
			uni.setBackgroundColor({
			    backgroundColor: '#ffffff',
			});
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize
				}
				getProjectList(params).then(res => {
					let list = res.data.data || []
					console.log(this.type);
					if(this.type){
						list = list.filter((item)=>item.cid == this.type)
					}
					console.log(list);
					this.$refs.paging.complete(list);
				})
			}
		}
	}
</script>
<style>
	page {
		/* background: #003153; */
		background: #fff !important;
	}
</style>
<style scoped lang="scss">
	page{
		background-color: #fff !important;
	}
	
	.title-txt{
		font-weight: 700;
		font-size: 34rpx;
	}
	 .z-paging-warp{
		// background-color: red;
	}
	.hot-txt{
		width: 100%;
		height: 66rpx;
		background: rgba(254, 89, 0, .1);
		line-height: 66rpx;
		padding: 0 22rpx;
		box-sizing: border-box;
		.h-right{
			color:rgba(254, 89, 0, 1) ;
			font-weight: 700;
			font-size: 30rpx;
		}
		.h-center,.h-left{
			color:rgba(254, 89, 0, .8);
			font-weight: 400;
		}
		.h-center{margin: 0 20rpx;}
	}
	.list {
		padding: 30rpx;
		.li {
			width: 100%;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-shadow: 0rpx 10rpx 12rpx 0rpx #F4F6FA;
			margin-bottom: 30rpx;
			border: 2rpx solid #E8EBF0;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-warp{
				width: 100%;
				height: 152rpx;
				// background-color: red;
				display: flex;
				align-items: center;
				.img-warp{
					width: 152rpx;
					height: 151rpx;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 32rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.item-info-warp{
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.item-tite{
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.item-feature1{
						display: flex;
						text{
							font-weight: 300;
							font-size: 22rpx;
							color: #AEAEAE;
						}
					}
					.item-feature2{
						display: flex;
						.feature{
							background: #F2F6FB;
							font-weight: 300;
							font-size: 20rpx;
							color: #8488A5;
							padding: 4rpx 8rpx;
							border-radius: 4rpx;
							box-sizing: border-box;
							margin-right: 10rpx;
						}
						.feature.active{
							background: #000000;
							color: #FFFFFF;
						}
					}
				}
			}
			.bottom-warp{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.num-time{
					font-weight: 300;
					font-size: 22rpx;
					color: #8488A5;
				}
				.prize{
					font-weight: 300;
					font-size: 28rpx;
					color: #FE5900;
				}
			}
			// .img {
			// 	image {
			// 		width: 100%;
			// 		height: 378rpx;
			// 		border-radius: 25rpx 25rpx 0 0;
			// 	}
			// }
			// .info {
			// 	padding: 15rpx;
			// 	.title {
			// 		font-weight: 500;
			// 		font-size: 34rpx;
			// 		color: #3D3D3D;
			// 		padding: 15rpx 0;
			// 	}
				
			// 	.mod {
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		margin-bottom: 20rpx;
			// 		.right {
			// 			button {
			// 				width: 207rpx;
			// 				height: 62rpx;
			// 				background: #003153;
			// 				border-radius: 5rpx 5rpx 5rpx 5rpx;
			// 				font-size: 35rpx;
			// 				color: #FFFFFF;
			// 				text-align: center;
			// 				line-height: 60rpx;
			// 			}
			// 		}
			// 		.left {
			// 			display: flex;
			// 			align-items: center;
			// 			font-size: 25rpx;
			// 			color: #979797;
			// 			.span {
			// 				width: 98rpx;
			// 				height: 47rpx;
			// 				background: #F0F4FB;
			// 				border-radius: 5rpx 5rpx 5rpx 5rpx;
			// 				font-weight: 400;
			// 				font-size: 30rpx;
			// 				color: #1677FF;
			// 				line-height: 47rpx;
			// 				text-align: center;
			// 				margin-right: 25rpx;
			// 			}
			// 		}
			// 	}
			// }
		}
	}
	
</style>